import React, { useState, useLayoutEffect } from 'react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'//引入路由中的hook
import './style.scss'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  PoweroffOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'   //引入icon图标
import { Layout, Menu, Button, theme } from 'antd';  //引入组件
import type { MenuProps } from 'antd'  //引入所需类型
import type { } from 'antd/es/menu'


const { Header, Sider, Content } = Layout;
// 菜单项类型
type MenuItem = Required<MenuProps>['items'][number]
//左侧菜单栏配置
const menuItems: MenuItem[] = [
  {
    key: '/info',
    icon: <UserOutlined />,
    label: '信息汇总',
    children: [
      {
        key: '/info/dashboard',
        icon: <UserOutlined />,
        label: '图表汇总'
      }
    ]
  },
  {
    key: '/sys',
    icon: <VideoCameraOutlined />,
    label: '后台设置',
    children: [
      {
        key: '/sys/user',
        icon: <UserOutlined />,
        label: '用户列表'
      }
    ]
  }
]

const Index = () => {
  //进行路由跳转操作
  const navigate = useNavigate()
  //获取路由信息
  const location = useLocation()
  //用于控制菜单栏的收缩
  const [collapsed, setCollapsed] = useState(false);
//获取路由信息中父级路由（如：sys）
  const [defaultOpenKeys, setDefaultOpenKeys] = useState<string[]>(() => {
    let pathname = location.pathname.split('/')[1]
    console.log(pathname);
    return ['/' + pathname]
  })
  //defaultSelectedKeys为当前路由选择（默认菜单）
  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<string[]>(() => {
    return [location.pathname]
  })
//点击菜单栏调用函数进行路由跳转
  const clickMenu = ({ key }: { key: string }) => {
    navigate(key, { replace: true })
  }
  //用户退出登录操作
  const userLogout=()=>{

  }
  return (
    <Layout className='admin-layout'>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className='logo-vertical' />
        {/* 菜单项 */}
        <Menu
          theme="dark"
          mode="inline"
          defaultOpenKeys={defaultOpenKeys}
          defaultSelectedKeys={defaultSelectedKeys}
          onClick={clickMenu}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header className='admin-layout-header'>
        <div>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '20px',
              width: 64,
              height: 64,
            }}
          />
          </div>
          <div>
            <span>
              <UserOutlined /> 张三
            </span>
            <span onClick={userLogout}>
              <PoweroffOutlined /> 退出
            </span>
          </div>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: '#fff',
            borderRadius: 8,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}
export default Index


